<script src="../ExternalLibrary/js/vue.js"></script>


<!-- ----------------------------01.组件的复用 start--------------------------- -->
<fieldset>
    <legend>01.组件的复用</legend>
    <div id="demo">
        <button-counter></button-counter>
        <button-counter></button-counter>
        <button-counter></button-counter>
    </div>
    <script>
        Vue.component("button-counter",{
            //组件是vue实例的语法糖,所以组件与new vue接受相同的选项。
            data:function(){//data必须是一个函数,因此每个实例可以维护一份被返回对象的独立拷贝(如果不是一个函数就不可以了)
                return{
                    count:0
                }
            },
            template:'<button v-on:click="count++">you click me{{count}}times.</button>'
        })

        new Vue({
            el:'#demo'
        })
    </script>
</fieldset>
<!-- ----------------------------01.组件的复用 end--------------------------- -->


<!-- ----------------------------02.组件自身传参 start--------------------------- -->
<fieldset>
    <legend>02.组件自身传参</legend>
    <div id="params">
        <param-tag guang='haha'></param-tag><!-- 此处的guang可以随便写, -->
        <param-tag></param-tag>
        <param-tag></param-tag>
    </div>
    <script>
        Vue.component("param-tag",{//自定义标签必须小写
            template:'<div>你好</div>',//template不能少,自定义标签要替换成这里面的标签
            mounted() {//此函数是vue生命周期函数之一,表示页面渲染完后执行
                console.log(this);//可以理解父子组件传参
                console.log(this.$attrs['guang'])
            },
        })

        new Vue({
            el:"#params"
        })
    </script>
</fieldset>
<!-- ----------------------------02.组件自身传参 end--------------------------- -->